<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html>
<html lang="zh-tw">
<head>
<meta charset="UTF-8">
<title>忘記密碼</title>
<!-- favicon -->
<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico">
<link rel="Bookmark" href="images/favicon.ico" type="image/x-icon"/>
<!-- reset.css -->
<link rel="stylesheet" href="css/reset.css" media="screen">
<!-- Skeleton grid system -->
<link rel="stylesheet" href="css/skeleton.css" media="screen">
<!-- css -->
<link rel="stylesheet" href="css/style.css" media="screen">
<!-- rwdmenu -->
<link type="text/css" rel="stylesheet" href="css/jquery.mmenu.css" />
<!-- Layout and Media queries-->
<link rel="stylesheet" href="css/layout.css" media="screen">
<!-- font-awesome.css -->
<link rel="stylesheet" href="css/font-awesome.min.css" media="screen">

<!--[if lt IE 9]>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

<!-- Mobile Specific Meta -->
<meta name="viewport"
	content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0">
</head>
<body class="loginPart">
	<div id="page">
		<div class="header FixedTop">
			<a href="#menu" class="headericon"></a>
			<img src="images/logo.png" alt="proactive Logo">
		</div><!-- header -->
		<div class="content">
			<div class="list-screen clearfix">
				<div class="navfull">
					<div class="container">
						<div class="grid_12 neck-in">
                            <div class="logo"><a href="index">Proactive</a></div>
							<ul class="topnav">
							<c:forEach items="${menuList}" var="menu">
								<li>
									<a href="${menu.url}" class="${menu.classString1}">
										${menu.icon}
										${menu.name}
									</a>
								</li>
							</c:forEach>	
							</ul>
							<ul class="login">
								<li><a href="register">註冊</a></li>
								<li><a href="login">登入</a></li>
							</ul>
                        </div>
					</div>
				</div>
			</div>
			<div class="container">
					<div class="grid_12">
						<div class="circle clearfix">
							<img src="images/key.png" alt="mail" class="topImg">
							<form class="grid_4 formPart" id="sendForm" method="post" action="sendPasswordConfirm">
								<h3>請輸入您的Email，您將收到重設密碼的Email</h3>
								<label><input type="text" name="account" placeholder="請輸入Email" class="textbox email"></label><br>
								<button type="button" id="send" class="btn_enter">送出</button><br><br><br>
							</form>
						</div>	
					</div>
			</div>							
	    </div><!-- content -->

		<!-- 左側meum滑出 -->
		<nav id="menu">
			<ul>		 
				<li class="logo"><a href="index">美編網</a></li>
				<c:forEach items="${menuList}" var="menu">				
				<li class="${menu.classString2}">
					<a class="${menu.classString1}" href="${menu.url}">${menu.icon}${menu.name}</a>
				</li>
				</c:forEach>	
				<li class="menumember"><a href="register">註冊</a></li>
				<li class="menumember"><a href="login">登入</a></li>
			</ul>
		</nav>
	</div><!-- page -->
	
	<!-- import jquery -->
	<script
		src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<!-- validate -->
	<script src="js/jquery.validate.js"></script>
	<script src="js/messages_zh_TW.js"></script>
	<script src="js/additional-methods.js"></script>
	<!-- rwdmenu -->
	<script type="text/javascript" src="js/jquery.mmenu.min.all.js"></script>
	<script type="text/javascript">
		$(function() {
			$('nav#menu').mmenu();
			$("#sendForm").validate({
				rules:{
					account:"required"
				},
				messages:{
					account:{
						required:"請填寫E-mail",
						email:"信箱格式不正確"
					}				
				},
	    	    invalidHandler: function(event, validator) {
	    	    	$("#send").attr("disabled", false);
	    	    }
			});
			
			$("#send").click(function(){
				$("#send").attr("disabled", true);
				$("#sendForm").submit();
			});
		});
	</script>
	<!-- some jquery method we use -->
	<script src="js/hoverjquery.js"></script>	
</body>
</html>